<script lang="ts" setup>
import { pick } from 'lodash-es'
import ReportPerson from './ReportPerson.vue'
import ContextmenuBox from './ContextmenuBox.vue'

import type { ReportList } from './useLoadList'
import useAll from './useAll'
import { TABLE_FIELD_QUARTER, TABLE_FIELD_YEAR } from './config'
import { uuid } from '@/utils'
import { loadUpdateUnitDetails } from '@/api/modules/enterpriseQuarterlyReport'
import { useStatementStore } from '@/store'

const statemetnStore = useStatementStore()
const readonly = computed(() => {
  return statemetnStore.readonly
})

const keys = [
  'productName',
  'quantity',
  'unitOfMeasurement',
  'quantityOne',
  'unitOfMeasurementOne',
  'numericalValue',
  'unitOfMeasurementTwo',
]
const data = ref({
  id: '',
  ssdq: '',
  ssly: '',
  hy: '',
  dwlx: '',
  dwxxmc: '',
  frdwdm: '',
  dwzcrq: '',
  dwzczb: '',
  fddbrxm: '',
  lxdh: '',
  sfyq: '',
  ssyqjtmc: '',
  dwdz: '',
  yzbm: '',
  xzqhdm: '',
  dzyx: '',
  nygljgmc: '',
  cz: '',
  zgjnldxm: '',
  lxdh1: '',
  nyglfzrxm: '',
  sj: '',
  nyglszh: '',
  sftgnygltxrz: '',
  tgrq: '',
  rzjg: '',

  bqgyzcz: '',
  sngyzcz: '',
  tbgyzcz: '',
  bqjgzs: '',
  snjgzs: '',
  tbjgzs: '',
  bqgyzczkbj: '',
  sngyzczkbj: '',
  tbgyzczkbj: '',
  bqxssr: '',
  snxssr: '',
  tbxssr: '',
  bqsjls: '',
  snsjls: '',
  tbsjls: '',
  bqcyry: '',
  sncyry: '',
  tbcyry: '',
  bqnyglsrs: '',
  snnyglsrs: '',
  tbnyglsrs: '',
  bqsccb: '',
  snsccb: '',
  tbsccb: '',
  bqnyxfcb: '',
  snnyxfcb: '',

  tbnyxfcb: '',
  bqnyxfzsccbbl: '',
  snnyxfzsccbbl: '',
  tbnyxfzsccbbl: '',
  bqzhnyxfl: '',
  snzhnyxfl: '',
  tbzhnyxfl: '',
  bqdwzczzhnh: '',
  sndwzczzhnh: '',
  tbdwzczzhnh: '',
  bqzzjrl: '',
  snzzjrl: '',
  tbzzjrl: '',
  bz: '',
})
const calc = computed(() => {
  const {
    sndwzczzhnh,
    bqzhnyxfl,
    snzhnyxfl,
    snnyxfzsccbbl,
    bqnyxfcb,
    snnyxfcb,
    bqsccb,
    snsccb,
    bqnyglsrs,
    snnyglsrs,
    bqcyry,
    sncyry,
    bqsjls,
    snsjls,
    bqxssr,
    snxssr,
    bqgyzczkbj,
    sngyzczkbj,
    bqjgzs,
    snjgzs,
    bqgyzcz,
    sngyzcz,
  } = data.value

  // 同比增长率 = （本期数 - 上期数）/ 上期数 ×100%
  const tb = (b: string | number, s: string | number) => {
    const n = +(((+b - +s) * 100) / +s).toFixed(2)
    return Number.isFinite(n) ? n : ''
  }

  // 能源消费占生产成本比例 = 能源消费成本 ÷ 生产成本 x 100%
  const qb = (a: string | number, b: string | number) => {
    const n = +((+a * 100) / +b).toFixed(2)
    return Number.isFinite(n) ? n : ''
  }

  // 单位产值综合能耗 ＝ 综合能源消费量 ÷ 工业总产值（可比价）
  const xb = (a: string | number, b: string | number) => {
    const n = +(+a / +b).toFixed(2)
    return Number.isFinite(n) ? n : ''
  }

  // 本期能源消费占生产成本比例
  const bqnyxfzsccbbl = qb(bqnyxfcb, bqsccb)
  const tbnyxfzsccbbl = tb(bqnyxfzsccbbl, snnyxfzsccbbl)

  // 单位产值综合能耗
  const bqdwzczzhnh = xb(bqzhnyxfl, bqgyzczkbj)
  const tbdwzczzhnh = tb(bqdwzczzhnh, sndwzczzhnh)

  return {
    // 综合能源消费量  （本期值是从结构附表中获取的）
    tbzhnyxfl: tb(bqzhnyxfl, snzhnyxfl),

    tbnyxfcb: tb(bqnyxfcb, snnyxfcb),
    tbsccb: tb(bqsccb, snsccb),
    tbnyglsrs: tb(bqnyglsrs, snnyglsrs),
    tbcyry: tb(bqcyry, sncyry),
    tbsjls: tb(bqsjls, snsjls),
    tbxssr: tb(bqxssr, snxssr),
    tbgyzczkbj: tb(bqgyzczkbj, sngyzczkbj),
    tbjgzs: tb(bqjgzs, snjgzs),
    tbgyzcz: tb(bqgyzcz, sngyzcz),

    // 能源消费占生产成本比例
    bqnyxfzsccbbl,
    tbnyxfzsccbbl,

    // 单位产值综合能耗
    bqdwzczzhnh,
    tbdwzczzhnh,
  }
})

const {
  title,
  lists,
  informant,
  left,
  top,
  clickCallback,
  loadPrevList,
  onContextmenu,
  delRow,
  prependRow,
  appendRow,
  report,
  saveStage,
  exportFile,
} = useAll(loadUpdateUnitDetails, {
  transfer(res, { readonly }) {
    const obj = res[0]
    const list = obj ? obj.list : []

    // Set data
    data.value = {
      ...data.value,
      ...pick(obj, Object.keys(data.value)),
    }

    if (list && list.length > 0) {
      return list.map((v: any) => ({
        uuid: uuid(),
        data: keys.map(key => ({
          key,
          value: v[key],
          editable: !readonly,
        })),
      }))
    }
    else {
      return Array(2)
        .fill(1)
        .map(() => ({
          uuid: uuid(),
          data: keys.map(key => ({
            key,
            value: '',
            editable: !readonly,
          })),
        }))
    }
  },
  getReportData({ year, quarter }) {
    const isNotEmpty = (
      array: ReportList['data'],
    ): boolean =>
      array.some((v) => {
        return v.value !== '' && v.value != null
      })

    const listsData = lists.value.map(v => v.data)
    const listsValue = listsData.filter(v => isNotEmpty(v))
    return listsValue.map((v) => {
      const obj = {} as any
      keys.forEach((prop, index) => {
        obj[prop] = v[index]?.value || ''
      })
      obj[TABLE_FIELD_YEAR] = String(year)
      obj[TABLE_FIELD_QUARTER] = String(quarter)
      return obj
    })
  },
  assignExtraData(params, { state, illustrate }) {
    const d = { ...data.value, ...calc.value } as any
    delete d.updateId
    delete d.updateTime
    delete d.creationId
    delete d.creationTime
    delete d.id

    params.data = {
      ...d,
      state,
      illustrate,
    }
  },
})
</script>

<template>
  <div
    ref="statementRef"
    class="width-100 height-100 statement-table position-relative overflow-hidden"
  >
    <slot
      name="title"
      :title="title"
      :report="report"
      :load-prev-list="loadPrevList"
      :save-stage="saveStage"
      :export-file="exportFile"
    >
      <h2 class="table-title padding text-center">
        {{ title }}
      </h2>
    </slot>
    <ElScrollbar
      class="bg-color"
      style="height: calc(100% - 54px)"
      wrap-style="overflow-x: hidden;"
    >
      <table class="report-table with-border-top">
        <tbody ref="tbody">
          <tr>
            <th>所属地区</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.ssdq"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>所属领域</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.ssly"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>行业</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.hy"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>单位类型</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.dwlx"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>单位详细名称</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.dwxxmc"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>法人单位代码</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.frdwdm"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>单位注册日期</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.dwzcrq"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>单位注册资本（万元）</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.dwzczb"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>法定代表人姓名</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.fddbrxm"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>联系电话（区号）</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.lxdh"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>是否央企</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.sfyq"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>所属央企集团名称</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.ssyqjtmc"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>单位地址</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.dwdz"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>邮政编码</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.yzbm"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>行政区划代码</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.xzqhdm"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>电子邮箱</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.dzyx"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>能源管理机构名称</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.nygljgmc"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>传真（区号）</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.cz"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>主管节能领导姓名</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.zgjnldxm"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>联系电话（区号）</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.lxdh1"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>能源管理负责人姓名</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.nyglfzrxm"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>手机</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.sj"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>能源管理师证号</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.nyglszh"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th>是否通过能源管理体系认证</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.sftgnygltxrz"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>通过日期</th>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.tgrq"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <th>认证机构</th>
            <td colspan="3">
              <div class="input-cell">
                <input
                  v-model="data.rzjg"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <th colspan="2">
              指标名称
            </th>
            <th>计量单位</th>
            <th>本期值</th>
            <th>上年值</th>
            <th>同比变化率（%）</th>
            <th colspan="2">
              产值及能源消费变化 情况说明
            </th>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              工业总产值(可比价)
            </td>
            <td class="like-th-but-no-bg-no-bold">
              万元
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqgyzczkbj"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.sngyzczkbj }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbgyzczkbj }}
              </div>
            </td>
            <td
              rowspan="10"
              colspan="2"
              class="special-cell"
            >
              <div class="input-cell">
                <input
                  v-model="data.bz"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              销售收入
            </td>
            <td class="like-th-but-no-bg-no-bold">
              万元
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqxssr"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snxssr }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbxssr }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              上缴利税
            </td>
            <td class="like-th-but-no-bg-no-bold">
              万元
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqsjls"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snsjls }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbsjls }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              从业人员
            </td>
            <td class="like-th-but-no-bg-no-bold">
              人
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqcyry"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.sncyry }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbcyry }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              能源管理师人数
            </td>
            <td class="like-th-but-no-bg-no-bold">
              人
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqnyglsrs"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snnyglsrs }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbnyglsrs }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              综合能源消费量(当量值)
            </td>
            <td class="like-th-but-no-bg-no-bold">
              万吨标准煤
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.bqzhnyxfl }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snzhnyxfl }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbzhnyxfl }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              生产成本
            </td>
            <td class="like-th-but-no-bg-no-bold">
              万元
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqsccb"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snsccb }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbsccb }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              能源消费成本
            </td>
            <td class="like-th-but-no-bg-no-bold">
              万元
            </td>
            <td>
              <div class="input-cell">
                <input
                  v-model="data.bqnyxfcb"
                  type="text"
                  @click="clickCallback"
                >
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snnyxfcb }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbnyxfcb }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              能源消费占生产成本比例
            </td>
            <td class="like-th-but-no-bg-no-bold">
              %
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.bqnyxfzsccbbl }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.snnyxfzsccbbl }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbnyxfzsccbbl }}
              </div>
            </td>
          </tr>
          <tr>
            <td
              class="like-th-but-no-bg-no-bold"
              colspan="2"
            >
              单位总产值综合能耗(当量值)
            </td>
            <td class="like-th-but-no-bg-no-bold">
              吨标准煤/万元
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.bqdwzczzhnh }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ data.sndwzczzhnh }}
              </div>
            </td>
            <td class="readonly">
              <div class="span-cell">
                {{ calc.tbdwzczzhnh }}
              </div>
            </td>
          </tr>
          <tr>
            <th colspan="2" rowspan="2">
              主要产品名称
            </th>
            <th colspan="2">
              年产能
            </th>
            <th colspan="2">
              年产量
            </th>
            <th colspan="2" class="with-border-top">
              单位产品能耗
            </th>
          </tr>
          <tr>
            <th>数量</th>
            <th>计量单位</th>
            <th>数量</th>
            <th>计量单位</th>
            <th>数值</th>
            <th>计量单位</th>
          </tr>
          <tr
            v-for="(item, index) in lists"
            :key="item.uuid"
          >
            <td
              v-for="(v, i) in item.data"
              :key="i"
              :colspan="i === 0 ? 2 : 1"
            >
              <div v-if="readonly" class="span-cell">
                {{ v.value }}
              </div>
              <div v-else class="input-cell">
                <input
                  v-model="v.value"
                  type="text"
                  @click="clickCallback"
                  @contextmenu="
                    evt => onContextmenu(evt, index)
                  "
                >
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="fill-description">
        <ReportPerson v-model="informant" />
        <p>说明：</p>
        <p>
          1．所属地区填写用能单位所在的省（市、自治区）。
        </p>
        <p>
          2．未开展能源管理师试点的省（自治区、直辖市）能源管理师人数填0，证号可不填。
        </p>
        <p>
          3．单位产值综合能耗＝综合能源消费量÷工业总产值（可比价）
        </p>
        <p>
          4．若综合能源消费量、产值能耗指标与上年同比变化率超过5%时，要填写说明，字数在100个汉字以内。
        </p>
        <p>
          5．所列产品的能源消耗量不低于企业总能耗的80%。
        </p>
        <p>6．年产能是指相应产品主体设备的年设计产能。</p>
      </div>
    </ElScrollbar>
    <ContextmenuBox
      :left="left"
      :top="top"
      @del-row="delRow"
      @prepend-row="prependRow"
      @append-row="appendRow"
    />
  </div>
</template>
